<template>
  <u-popup :show="value">
    <view class="head">
      <view class="title">推荐服务点</view>
      <image class="close" src="@/static/goodDetail/close.png" @click="handleClose"></image>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="active = index">
        <image :src="index == active ? '/static/my/check.png' : '/static/my/uncheck.png'"> </image>
        <view class="box">
          <view>服务点：{{ item.title }}</view>
        </view>
      </view>
    </view>
    <view class="foot">
      <u-button type="primary" shape="circle" @click="handleSave">确认</u-button>
    </view>
  </u-popup>
</template>
<script setup>
import uPopup from "@/uni_modules/uview-plus/components/u-popup/u-popup.vue";
import uButton from "@/uni_modules/uview-plus/components/u-button/u-button.vue";
import { reactive, toRefs, defineEmits, computed } from 'vue'
import { timestampToTime } from '@/common/index.js'
const emit = defineEmits(['success', 'update:modelValue']);
const props = defineProps({
  modelValue: Boolean,
  list: Array
})
const value = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  }
})
const state = reactive({
  active: 0,
})
function handleClose () {
  emit('update:modelValue', false)
}
function handleSave () {
  const item = props.list[state.active]
  emit('success', item)
  emit('update:modelValue', false)
}
const {
  active,
} = toRefs(state)
</script>

<style lang="scss" scoped>
.head {
  margin: 16rpx;
  position: relative;
  text-align: center;

  .title {
    font-weight: 800;
    font-size: 36rpx;
  }

  image {
    position: absolute;
    right: 0rpx;
    top: 0rpx;
    width: 44rpx;
    height: 44rpx;
  }
}

.item {
  display: flex;
  align-items: center;
  padding: 26rpx;

  &>image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 22rpx;
  }

  .box {
    background: #FFFFFF;
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;

    .current-state {
      margin: 0rpx;
      display: flex;
      align-items: center;

      .active {
        background: rgba(88, 219, 207, 0.1);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 1rpx solid #58DBCF;
        color: #58DBCF;
      }

      view {
        margin: 0rpx;
        width: 102rpx;
        height: 38rpx;
        line-height: 40rpx;
        font-weight: 500;
        font-size: 18rpx;
        text-align: center;
        background: rgba(255, 0, 0, 0.1);
        border-radius: 10rpx 10rpx 10rpx 10rpx;
        border: 1rpx solid #FF0000;
        color: #FF0000;
      }
    }
  }
}


.foot {
  text-align: right;
  padding: 16rpx;

}
</style>